<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/WEB-INF/facelets/templates/template.xhtml">
	<ui:define name="head">
		<script src="http://maps.google.com/maps/api/js?sensor=true"
			type="text/javascript"></script>

		<script type="text/javascript">
			var currentMarker = null;

			function handlePointClick(event) {
				if (currentMarker != null) {
					currentMarker.setMap(null);
					currentMarker = null;
				}

				if (currentMarker == null) {
					document.getElementById('lat').value = event.latLng.lat();
					document.getElementById('lng').value = event.latLng.lng();

					currentMarker = new google.maps.Marker({
						position : new google.maps.LatLng(event.latLng.lat(),
								event.latLng.lng())
					});

					map.addOverlay(currentMarker);
					dlg.show();
				}
			}

			function markerAddComplete() {
				var direccion = document.getElementById('direccion');
				currentMarker.setTitle(direccion.value);
				direccion.value = "";
				dlg.hide();
			}

			function limpiarMarcadores() {
				dlg.hide();
				currentMarker.setMap(null);
				currentMarker = null;
				return false;
			}
		</script>

	</ui:define>

	<ui:define name="homeInfo">
		<div style="position: absolute; right: 0px;">
			<h:form>
				<p:commandButton value="Iniciar Sesión" onclick="ingreso.show()" />
			</h:form>
		</div>

		<p:dialog widgetVar="ingreso" header="Iniciar sesi&oacute;n"
			showEffect="fade" hideEffect="explode" close="false"
			resizable="false" fixedCenter="true" draggable="false">
			<h:form prependId="false">
				<h:panelGrid columns="2" id="pngIngresoLogin">
					<h:outputText value="Login:" />
					<p:inputText value="#{inicioAction.usuarioBean.login}" />

					<h:outputText value="Clave:" />
					<p:password password="true"
						value="#{inicioAction.usuarioBean.clave}" />

					<p:commandButton value="Ingresar"
						action="#{inicioAction.validarIngreso}" />
					<h:outputText value="#{inicioAction.mensajeValCredenciales}" />

				</h:panelGrid>
			</h:form>
		</p:dialog>
	</ui:define>

	<ui:define name="menu">
		<ui:include src="MenuGeneral.xhtml"></ui:include>
	</ui:define>

	<ui:define name="menuIzquierda">
		<iframe
			src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Faristocracia.somoslaclave&amp;width=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=false&amp;height=630"
			scrolling="no" frameborder="0"
			style="border: none; overflow: hidden; width: 270px; height: 630px; background: white;"></iframe>
	</ui:define>

	<ui:define name="body">
		<h:form>
			<h:panelGrid width="100%">
				<p:fieldset legend="Member Registration">

					<p:accordionPanel id="acpDatosPersonales" multiple="true">

						<p:tab title="Personal Info" id="tabDatosPersonales">
							<h:panelGrid columns="4">
								<h:outputText value="Lastname (*)" />
								<p:spacer width="15" height="25" />
								<p:inputText style="width:500px"
									value="#{socioSolicitudRegistroAction.oPrimaryMember.lastname}" />
								<h:outputText value="" />

								<h:outputText value="Firstname (*)" />
								<p:spacer width="15" height="25" />
								<p:inputText style="width:500px"
									value="#{socioSolicitudRegistroAction.oPrimaryMember.firstname}" />
								<h:outputText value="" />

								<h:outputText value="Gender (*)" />
								<p:spacer width="15" height="25" />
								<p:selectOneMenu
									value="#{socioSolicitudRegistroAction.oPrimaryMember.gender}"
									effect="fade">
									<f:selectItem itemValue="1" itemLabel="Male" />
									<f:selectItem itemValue="0" itemLabel="Female" />
								</p:selectOneMenu>
								<h:outputText value="" />
							</h:panelGrid>
						</p:tab>

						<p:tab title="Contact Info" id="tabDatosContacto">
							<h:panelGrid columns="4">
								<h:outputText value="Home Number (*)" />
								<p:spacer width="15" height="25" />
								<p:inputText style="width:120px"
									value="#{socioSolicitudRegistroAction.oContactInfo.homeno}" />
								<h:outputText value="" />

								<h:outputText value="Work Number (*)" />
								<p:spacer width="15" height="25" />
								<p:inputText style="width:120px"
									value="#{socioSolicitudRegistroAction.oContactInfo.workno}" />
								<h:outputText value="" />

								<h:outputText value="Cell Phone (*)" />
								<p:spacer width="15" height="25" />
								<p:inputText style="width:120px"
									value="#{socioSolicitudRegistroAction.oContactInfo.cellno}" />
								<h:outputText value="" />

								<h:outputText value="Email (*)" />
								<p:spacer width="15" height="25" />
								<p:inputText style="width:120px"
									value="#{socioSolicitudRegistroAction.oContactInfo.email}" />
								<h:outputText value="" />
							</h:panelGrid>
						</p:tab>

						<p:tab title="Address" id="tabDatosUbicacion">
							<h:form>

								<h:panelGrid columns="4">
									<h:outputText value="Street Number (*)" />
									<p:spacer width="15" height="25" />
									<p:inputText style="width:120px"
										value="#{socioSolicitudRegistroAction.oAddress.streetno}" />
									<h:outputText value="" />

									<h:outputText value="Apt Number (*)" />
									<p:spacer width="15" height="25" />
									<p:inputText style="width:120px"
										value="#{socioSolicitudRegistroAction.oAddress.aptno}" />
									<h:outputText value="" />

									<h:outputText value="ZIP Code (*)" />
									<p:spacer width="15" height="25" />
									<p:inputText style="width:120px"
										value="#{socioSolicitudRegistroAction.oAddress.zipcode}" />
									<h:outputText value="" />

									<h:outputText value="City (*)" />
									<p:spacer width="15" height="25" />
									<p:inputText style="width:120px"
										value="#{socioSolicitudRegistroAction.oAddress.city}" />
									<h:outputText value="" />

									<h:outputText value="Country (*)" />
									<p:spacer width="15" height="25" />
									<p:selectOneMenu
										value="#{socioSolicitudRegistroAction.oAddress.country}"
										effect="fade">
										<f:selectItem itemValue="-1" itemLabel="-- Seleccione --" />
										<f:selectItems
											value="#{socioSolicitudRegistroAction.listCountries}" />
									</p:selectOneMenu>
									<h:outputText value="" />

									<h:outputText value="State (*)" />
									<p:spacer width="15" height="25" />
									<p:inputText style="width:120px"
										value="#{socioSolicitudRegistroAction.oAddress.state}" />
									<h:outputText value="" />


									<h:outputText value="Street Name (*)" />
									<p:spacer width="15" height="25" />
									<p:gmap id="gmap"
										center="#{socioSolicitudRegistroAction.geoCenter}" zoom="8"
										type="HYBRID" style="width:600px;height:400px"
										model="#{socioSolicitudRegistroAction.emptyModel}"
										onPointClick="handlePointClick(event)" widgetVar="map"
										streetView="true" disableDoubleClickZoom="true" />
									<p:spacer />


								</h:panelGrid>
							</h:form>
						</p:tab>
					</p:accordionPanel>
					<div>
						<p:commandButton value="Save"
							update="acpDatosPersonales"
							action="#{socioSolicitudRegistroAction.validarGrabar}"
							oncomplete="limpiarMarcadores()" />
					</div>
				</p:fieldset>
			</h:panelGrid>
		</h:form>


		<p:growl showDetail="true" autoUpdate="true" />

		<p:dialog widgetVar="dlg" effect="FADE" close="false"
			fixedCenter="true" header="Direction">
			<h:form prependId="false">
				<h:panelGrid columns="2">
					<p:inputText id="direccion" value="#{socioSolicitudRegistroAction.oAddress.streetname}" />

					<f:facet name="footer">
						<p:commandButton value="Add"
							actionListener="#{socioSolicitudRegistroAction.addMarker}"
							oncomplete="markerAddComplete()" />
						<p:commandButton value="Cancel"
							onclick="return limpiarMarcadores()" />
					</f:facet>
				</h:panelGrid>

				<h:inputHidden id="lat"
					value="#{socioSolicitudRegistroAction.socioBean.latitud}" />
				<h:inputHidden id="lng"
					value="#{socioSolicitudRegistroAction.socioBean.longitud}" />
			</h:form>
		</p:dialog>

	</ui:define>
</ui:composition>
</html>